<template>
  <div>
    <h2>楼层人数情况</h2>
    <div id="four" style="width: 500px;height:200px;">
      容纳后期的图表
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import http from "../util/api";
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
onMounted(() => {
  // 获取到标签
  var chartDom = document.getElementById('four')!;
  var myChart = echarts.init(chartDom);

  http('/chartDataFour').then((res: any) => {
    console.log(res);

   option = {
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['一般用户', '月租用户', '特殊车辆', '洒水车', '非机动车']
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          data: [
            { value: 635, name: '一般用户' },
            { value: 1010, name: '月租用户' },
            { value: 434, name: '特殊车辆' },
            { value: 135, name: '洒水车' },
            { value: 1548, name: '非机动车' }
          ]
        }
      ]
    };
    option && myChart.setOption(option);
  })
})


</script>
<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}

/* ::v-deep h2{
    background-color: #999;

} */
#four {
  /* 高度360 */
  margin: 0 auto;
  height: 4.0rem;

  background-color: #785d5d;
}
</style>

